<!--
 * @Author: zqg
 * @Date: 2021-01-10 15:51:10
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-02 14:13:52
 * @Description: file content
-->
<template>
  <base-layout
    :visible-sea="false"
    :visible-content="false"
    dialog-title="员工考勤详情"
    :dialog-visible="dialogVisible"
    @dialog-close="handleClose"
    dialogWidth="60%"
  >
    <template #dialog>
      <el-form ref="userInfo" :model="userInfo" label-width="130px">
        <el-row>
          <el-col>员工考勤详情</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="员工编号:">
              <span>{{ userInfo.code || '' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工姓名:">
              <span>{{ userInfo.userName || '' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工电话:">
              <span>{{ userInfo.phone || '' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="员工职位:">
              <span>{{ userInfo.roleNames || '' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属门店:">
              <span>{{ userInfo.storeName || '' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考勤月份:">
              <span>{{ userInfo.entryTime || '' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>考勤列表</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <attendance-table :userId="userId" />
      </el-form>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import BaseLayout from '@/views/layout/Base'
import { getUserId } from '@/api/after-sale/personnel/index'
import { parseTimeToYMDHMS } from '@/utils/index'
import attendanceTable from './attendanceTable.vue'
export default {
  components: {
    BaseLayout,
    attendanceTable
  },
  mixins: [baseMixin({})],
  data() {
    return {
      // 用户id
      userId: '',
      // 显示/不显示弹窗
      dialogVisible: false,
      // 员工信息
      userInfo: {}
    }
  },
  methods: {
    /**
     * @description: 组件初始化处理
     * @param {*}
     * @return {*}
     */
    getUserInfo() {
      getUserId(this.userId).then(res => {
        const { data } = res
        if (data) {
          data.entryTime = parseTimeToYMDHMS(data.entryTime, 'YYYY-MM')
          this.userInfo = res.data || {}
        }
      })
    },
    /**
     * @description: 打开弹窗
     * @param {Object} 员工信息
     * @return {void}
     */
    open(info) {
      this.dialogVisible = true
      this.userId = info.userId
      this.getUserInfo()
    },
    /**
     * @description: 关闭弹窗
     * @param {*}
     * @return {*}
     */
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
}
.active-btn {
  background-color: #00a1ec;
  color: #ffffff;
}
</style>
